<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程表</title>
    <link rel="stylesheet" href="../css/class.css">
</head>

<body>
    <div class="class">
        <div class="header">
            <a href="javascript:;" class="back"></a>
            <div class="search-box">
                <span>课程</span>
                <input type="text" class="search" placeholder="搜索课程、机构">
            </div>
        </div>
        <div class="timetable">
            <div class="sidebar">
                <ul>
                    <li><a href="javascript:;">位置</a></li>
                    <li><a href="javascript:;">艺术</a></li>
                    <li><a href="javascript:;">智能排序</a></li>
                    <li><a href="javascript:;">筛选</a></li>
                </ul>
            </div>
        </div>
        <div class="cla-item">
        </div>
    </div>


    <script src="../js/jQuery.js"></script>
    <script>
        $(function () {
            var item = '';
            async function loadClass() {
                return await $.get('/data/class.json');
            }
            loadClass().then(function (res) {
                $(res.course).each(function (i, v) {
                    item += `
            <div class="infor clearfix">
                <p><img src="${v.photo}">
                    <i>${v.teacher}</i>
                </p>
                <div class="mation">
                    <ul>
                        <li class="sbject">
                            <h1>${v.sbject}</h1>
                            ${v.tuan ? `<span class="tuan"></span>` : ''}
                            ${v.jian ? `<span class="jian"></span>` : ''}
                            ${v.hui ? `<span class="hui"></span>` : ''}
                            ${v.zhe ? `<span class="zhe"></span>` : ''}
                        </li>
                        <li class="area">${v.area}</li>
                        <li class="time">${v.time}</li>
                        <li class="money">
                            ¥<span class="price">${v.price}</span>
                            <span class="no-pri">¥${v.price}</span>
                        </li>
                        <li class="number clearfix">
                            已报<span class="yet">${v.yet}</span>/<span class="sum">${v.sum}</span>人
                            <span class="site">海淀区</span>
                        </li>
                        <li class="whenever">
                            ${v.tui ? `<span>随时退班</span>` : ''}
                            ${v.cha ? `<span>随时插板</span>` : ''}
                            ${v.free ? `<span>免费试学</span>` : ''}
                        </li>
                    </ul>
                </div>
            </div>`
                })
                $('.cla-item').html(item);

            })

            $('.back').on('click', function () {
                location.href = '../index.html';
            })
        })
    </script>
</body>

</html>